{% extends 'bike/base.html' %}

{% block title %}{{ bike.bike_number }} - 自行车详情{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="bi bi-bicycle"></i> 自行车详情</h2>
            <a href="{% url 'bike:bike_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> 返回列表
            </a>
        </div>

        <div class="row">
            <!-- 基本信息 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-info-circle"></i> 基本信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-7">
                                <table class="table table-borderless">
                                    <tr>
                                        <td class="fw-bold">自行车编号：</td>
                                        <td>
                                            <span class="badge bg-primary fs-6">{{ bike.bike_number }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">型号：</td>
                                        <td>{{ bike.model }}</td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">类别：</td>
                                        <td>
                                            <span class="badge bg-info">{{ bike.get_category_display }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">颜色：</td>
                                        <td>{{ bike.color|default:"未设置" }}</td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">购买日期：</td>
                                        <td>{{ bike.purchase_date|default:"未设置" }}</td>
                                    </tr>
                                </table>
                            </div>
                            <!-- 自行车照片 -->
                            {% if bike.image %}
                            <div class="col-md-5 d-flex align-items-center justify-content-center">
                                <img src="{{ bike.image.url }}" alt="自行车照片" class="rounded" style="width: 150px; height: 200px; object-fit: cover; border: 2px solid #dee2e6;">
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 所有人信息 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-person"></i> 所有人信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-borderless">
                            <tr>
                                <td class="fw-bold">姓名：</td>
                                <td>{{ bike.owner_name }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">学号：</td>
                                <td>{{ bike.owner_student_id|default:"未设置" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">学院：</td>
                                <td>
                                    <span class="badge bg-secondary">{{ bike.get_college_display }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="fw-bold">班级：</td>
                                <td>{{ bike.class_name|default:"未设置" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">联系电话：</td>
                                <td>
                                    {% if bike.phone_number %}
                                    <a href="tel:{{ bike.phone_number }}" class="text-decoration-none">
                                        <i class="bi bi-telephone"></i> {{ bike.phone_number }}
                                    </a>
                                    {% else %}
                                    未设置
                                    {% endif %}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 备注信息 -->
        {% if bike.notes %}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-chat-text"></i> 备注信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-0">{{ bike.notes }}</p>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- 系统信息 -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-clock"></i> 系统信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p class="mb-1">
                                    <span class="fw-bold">创建时间：</span>
                                    {{ bike.created_at|date:"Y年m月d日 H:i" }}
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-1">
                                    <span class="fw-bold">更新时间：</span>
                                    {{ bike.updated_at|date:"Y年m月d日 H:i" }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- 历史违章记录 -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-clock-history"></i> 历史违章记录
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if violations %}
                            {% for violation in violations %}
                            <div class="card mb-3 {% if violation.status == 'resolved' %}border-success{% elif violation.status == 'pending' %}border-warning{% else %}border-danger{% endif %}">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div class="flex-grow-1">
                                            <h6 class="card-title">
                                                <span class="badge bg-danger">{{ violation.get_violation_type_display }}</span>
                                                {% if violation.status == 'pending' %}
                                                <span class="badge bg-warning">待处理</span>
                                                {% elif violation.status == 'processing' %}
                                                <span class="badge bg-info">处理中</span>
                                                {% elif violation.status == 'resolved' %}
                                                <span class="badge bg-success">已解决</span>
                                                {% else %}
                                                <span class="badge bg-secondary">已撤销</span>
                                                {% endif %}
                                            </h6>
                                            <p class="card-text">{{ violation.description }}</p>
                                            <small class="text-muted">
                                                <i class="bi bi-geo-alt"></i> {{ violation.location }}
                                                <br>
                                                <i class="bi bi-clock"></i> {{ violation.created_at|date:"Y年m月d日 H:i" }}
                                                {% if violation.reporter_name %}
                                                <br>
                                                <i class="bi bi-person"></i> 检查人：{{ violation.reporter_name }}
                                                {% endif %}
                                            </small>
                                        </div>
                                        {% if violation.violation_images %}
                                        <div class="ms-3">
                                            <img src="{{ violation.violation_images.url }}" alt="违章照片" class="rounded" style="width: 80px; height: 60px; object-fit: cover; border: 1px solid #dee2e6;">
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        {% else %}
                            <div class="text-center text-muted py-4">
                                <i class="bi bi-check-circle display-4"></i>
                                <p class="mt-2 mb-0">暂无违章记录</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="d-flex gap-2">
                    <a href="{% url 'bike:bike_list' %}" class="btn btn-primary">
                        <i class="bi bi-list"></i> 查看所有自行车
                    </a>
                    <a href="{% url 'bike:bike_statistics' %}" class="btn btn-info">
                        <i class="bi bi-graph-up"></i> 查看统计信息
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
